<template>
  <div>
    <!-- 这里就是创建数据库的组件 -->
    <el-dialog
      title="创建数据库"
      :visible.sync="dialogVisible"
      center
      width="768px"
      height="10px"
      append-to-body
      @close="padlock"
    >
      <!-- 这里就是第二步Progress==2的时候 -->
      <div class="reset-main">
        <el-form ref="newruleForm" class="reset-main-form" :model="newruleForm" :rules="rules">
          <div class="total-text"><span style="color:red;margin-right:3px;">*</span> 总库名称</div>
          <el-form-item prop="name">
            <el-input v-model="newruleForm.name" />
          </el-form-item>
          <div class="total-text">总库描述 <span style="font-size:11px;margin-left:5px;opacity:0.7;">非必填</span></div>
          <el-form-item>
            <el-input v-model="newruleForm.region" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button

          @click.native.prevent="padlock"
        >取 消</el-button>
        <el-button
          type="primary"
          @click.native.prevent="totalSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览模板弹框 -->
  </div>
</template>
<script>
//  获取数据库新增
import { createDatabase } from '@/api/table'
// 获取模板下目录列表
export default {
  props: {
    dialogVisible: { type: Boolean, default: false },
    getTemplate: { type: Array, default: () => [] }, // 这里就是渲染预览的地方 //自定义第一次渲染也是这个数据
    selfDefinedTemplate: { type: Array, default: () => [] } // 这里就是自定义组件的渲染
  },
  data() {
    return {
      Progress: 1, // 步骤条
      // 这里就是完善信息的内容
      newruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入总库名称', trigger: 'blur' }
        ]
      },
      newTemplate: {}
    }
  },
  async created() {
  },
  methods: {

    // 清除表单数据和验证规则
    clearRules() {
      this.newruleForm = {
        name: '',
        region: ''
      }
      this.$refs.newruleForm.clearValidate()
    },
    // 关闭弹窗
    padlock() {
      // 清理数据
      this.clearRules()
      // 告诉父组件
      this.$emit('dialogVisibles', false)
    },
    // 创建数据库最终提交数据
    async  totalSubmit() {
      /*
      首先 用户点击使用
      拿到数据
      发送请求
      请求成功之后Progress变成1
      */
      // 校验
      try { await this.$refs.newruleForm.validate() } catch (e) {
        // console.log('eeee', e)
        return this.$message.error('请输入总库名称')
      }
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // 拿数据
      console.log('newTemplate', this.newTemplate)
      var nerRes = {
        parent_id: 0,
        origin_template_id: 0,
        database_name: this.newruleForm.name,
        database_introduction: this.newruleForm.region,
        create_template_data: null
      }
      console.log(nerRes)
      const res = await createDatabase(nerRes)
      // 关闭加载弹框
      loading.close()
      console.log('eeeeeeeee111', res)
      let z = 0
      if (res.data.code === 1) {
        z = 1
        this.$message.success(res.data.msg)
        // 将用户创建成功的id赋值
        this.$store.dispatch('database/setDatabaseId', res.data.data.id)
        this.$store.dispatch('database/setTemplate_id', res.data.data.template_id)
        this.$store.dispatch('database/setIsItOperable', 1)
      } else {
        this.$message.error(res.data.msg)
      }
      // 告诉父元素 刷新页面
      await this.$emit('reloadThePage', z)
      // setTimeout(() => {
      //   this.$emit('dialogVisibles', false)
      // }, 1000)

      // 关闭弹窗
      // setTimeout(() => {
      // this.dialogVisible = false
      // }, 30)
    }
  }
}
</script>

<style lang="scss" scope>
.database-bore-f {
  cursor: pointer;
  border: 2px solid #fbfbfb;
  border-radius: 7px 7px 0 0;
  width: 200px;
  margin: 0 55px 30px 0;
  float: left;
}
.database-bore-f:nth-child(3n){
  margin-right: 0;
}
// 第二步
.reset-main {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .reset-main-form {
    width: 400px;
    padding: 20px 70px;
    .total-text{
      height: 40px;
      line-height: 40px;
    }
  }
}
// 预览模板弹框
.back-icon {
    position: absolute;
    color: #919191;
    font-size: 17px;
  }

</style>
